<template>
  <div class="box">
    <div class="boxa">
      <div class="boxb">
        <span class="iconfont icon-zhifu-zhifubao"></span>
        <span class="zf">支付宝支付</span>
      </div>
      <div>
        <input type="checkbox" name="" id="" />
      </div>
    </div>
    <div class="boxa">
      <div class="boxb">
        <span class="iconfont icon-weixinzhifu"></span>
        <span class="zf">微信支付</span>
      </div>
      <div>
        <input type="checkbox" name="" id="" />
      </div>
    </div>
    <div class="boxa">
      <div class="boxb">
        <span class="iconfont icon-qq"></span>
        <span class="zf">QQ支付</span>
      </div>
      <div>
        <input type="checkbox" name="" id="" />
      </div>
    </div>
    <div class="xz">
      <input type="checkbox" name=""   @click="fun1()" id="" :checked="checked" />
      <div class="wo">我已同意百词斩用户协议和隐私政策</div>
    </div>
    <div id="big">
      <div class="box123">
        <div>
          <span class="shi">实付款</span>
          <span class="yuan">￥</span>
          <span class="n">39</span>
        </div>
        <div class="fk" @click="fun()">付款</div>
      </div>
    </div>
  
    <van-popup
      closeable
      position="top"
      :style="{ height: '10%' }"
      v-model="show"
      >请您勾选百词斩协议</van-popup
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      show: false,
    };
  },
  methods: {
    fun() {
      if (this.checked) {
        this.$router.push("/zhifubao");
      
       
      } else {
        this.show=true
        
      }
    },
    fun1(){
      this.show=false
      this.checked=!this.checked
      
    }
  },
};
</script>

<style scoped>
.van-popup {
    position: fixed;
    max-height: 100%;
    overflow-y: auto;
    text-align: center;
    color: red;
    line-height: .7rem;
    background-color: #fff;
}
.box {
  width: 3.42rem;
  /* height:.7rem ; */
  margin: 0 auto;
}
.icon-weixinzhifu {
  color: greenyellow;
}
.icon-qq {
  color: #f54b34;
}
.icon-zhifu-zhifubao {
  color: blue;
  font-size: 0.22rem;
  padding-top: 0.6rem;
  line-height: 0.58rem;
}

.boxa {
  height: 0.58rem;
  /* background: paleturquoise; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zf {
  font-size: 0.2rem;
  margin-left: 0.05rem;
  line-height: 0.58rem;
  font-weight: 550;
}
.xz {
  display: flex;
  height: 0.34rem;
  align-items: center;
}
.wo {
  margin-left: 0.1rem;
}
#big {
  width: 3.42rem;
  /* height:.7rem ; */
  margin: 0 auto;
}
.box123 {
  display: flex;
  height: 0.96rem;
  /* background: palegreen; */
  align-items: center;
  justify-content: space-between;
}
.yuan {
  font-size: 0.15rem;
  color: #e96e45;
}
.shi {
  font-size: 0.12rem;
}
.n {
  font-size: 0.25rem;
  color: #e96e45;
  font-weight: 700;
}
.fk {
  width: 1.52rem;
  height: 0.45rem;
  background: #e96e45;
  font-size: 0.16rem;
  font-weight: 600;
  color: white;
  border-radius: 0.08rem;
  text-align: center;
  line-height: 0.45rem;
}
</style>